import { Menu } from 'antd';
import { MailOutlined, AppstoreOutlined, SettingOutlined } from '@ant-design/icons';
import { history } from 'umi';
import { MenuItemList } from '../_layout'

const { SubMenu } = Menu;

function handleClick(e) {
  console.log('click', e);
  history.push(e.key);

}
interface PropsType {
  menuList: MenuItemList[]
}
const MyMenu = ({ menuList }) => {
  return (
    <Menu theme="dark" onClick={handleClick} style={{ width: '100%' }} mode="vertical">
      {
        menuList.map(item => {
          if (item.children) {
            return <SubMenu key={item.key} icon={item.icon} title={item.title}>
              {
                item.children.map(val => {
                  return <Menu.Item key={val.key}>{val.title}</Menu.Item>
                })
              }
            </SubMenu>
          } else {
            return <Menu.Item key={item.key} icon={item.icon}>{item.title}</Menu.Item>
          }
        })

      }
    </Menu>
  );
}

export default MyMenu;
